<template>
  <div class="company">
    <div class="header">
      <span>公司介绍</span>
    </div>
    <!-- 表格 -->
    <el-table 
    :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="序号" width="80" />
      <el-table-column label="简介" width="380">
        <template #default>
          <span class="gsjianjie" v-html="jianjie"></span>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="操作时间" width="280" />
      <el-table-column label="操作" width="280">
        <template #default>
          <el-button link type="primary" size="small" @click="handleClick"
            >编辑</el-button
          >
          <el-button link type="primary" size="small" @click="handlelook"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 查看简介 -->
    <el-dialog v-model="centerDialogVisible" title="简介" width="80%" center>
      <template #default>
        <span v-html="jianjie"></span>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script  setup>
import { ref, reactive } from "@vue/reactivity";
import dayJS from "dayjs";
import { value } from "dom7";
import { useRouter } from "vue-router";
import useAboutStore from "../../store/aboutuse1";
const router = useRouter();
const store = useAboutStore();
const centerDialogVisible = ref(false);
const formLabelWidth = "140px";
const form = reactive({});
// 查看
const handlelook = () => {
  centerDialogVisible.value = true;
};
//跳转编辑页面
const handleClick = () => {
  router.push("/compile");
};
const tableData = ref([
  {
    date: "1",
    name: "Tom",
    time: dayJS(new Date()).format("YYYY年MM月DD日"),
  },
]);

tableData.value = store.introList;
const jianjie = store.introList[0].name;
</script>
<style lang="less" scoped>
// 多行文本隐藏
.gsjianjie {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.header {
  width: 100%;
  height: 40px;
  padding: 5px;
  color: rgb(255, 153, 0);
  line-height: 30px;
  span {
    display: inline-block;
    width: 100px;
    height: 26px;
    border-left: 6px solid rgb(255, 153, 0);
    padding: 5px;
  }
}
</style>
